//画图
var cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: cytoscape.stylesheet()
    .selector('node')
    .style({
      'content': 'data(id)'
    })
    .selector('edge')
    .style({
      //'curve-style': 'bezier',
      'content': 'data(weight)',
      'target-arrow-shape': 'triangle',
      'width': 2,
      'line-color': '#ddd',
      'target-arrow-color': '#ddd'
    })
    .selector('.highlighted')
    .style({
      'background-color': '#61bffc',
      'line-color': '#61bffc',
      'target-arrow-color': '#61bffc',
      'transition-property': 'background-color, line-color, target-arrow-color',
      'transition-duration': '0.5s'
    }),

  elements: {
    nodes: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      { data: { id: 'c' } },
      { data: { id: 'd' } },
      { data: { id: 'e' } },
    ],

    edges: [
      { data: { id: 'ae', weight: 10, source: 'a', target: 'e' } },
      { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
      { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
      { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
      { data: { id: 'cd', weight: 5, source: 'c', target: 'd' } },
      { data: { id: 'de', weight: 5, source: 'd', target: 'e' } },
    ]
  },
  layout: {
    name: 'preset',
    directed: true,
    roots: '#a',
    padding: 100
  }
});


let content ;//存放Ajax请求的点集信息
let minTreePrime;
//首先使用Ajax获取点集
window.onload=getload();
 function getload() {
  this.getMatrixData();
  this.getMinTreeData();
  this.getMinTreeDataByKruskal();
}
 function  getMatrixData() {
  let xhr = new XMLHttpRequest();
        xhr.open("GET","/getNotes",false);
		xhr.onload = function() {
			if (xhr.status == 200) {
                  content=JSON.parse(xhr.responseText);
			} else {
              alert("请求失败！")
			}
		};
		xhr.send();
}
//使用Ajax获取prime算法所得到的最小生成树
 function  getMinTreeData() {
  let xhr = new XMLHttpRequest();
        xhr.open("GET","/getMinTreeByPrime",false);
		xhr.onload = function() {
			if (xhr.status == 200) {
                  minTreePrime=JSON.parse(xhr.responseText);
			} else {
              alert("请求失败！")
			}
		};
		xhr.send();
}


//使用prime算法添加点集和边集
function addNotesAndEdges() {
    cy.remove("nodes")
for(var i=0;i<content.length-1;i++){
    cy.add([
  { group: "nodes", data: { id: "A"+(i+1)+"" } },
  { group: "nodes", data: { id: "A"+(i+2)+"" } }

]);
}
for(var i=0;i<content.length;i++){
    for(var j=0;j<content[i].length-1;j++){
        if(i-j>1||i==0){
            cy.add([
  { group: "edges", data: { id: "A"+(i+1)+"A"+(2+j)+"",weight:content[i][j+1],source:"A"+(i+1)+"",target:"A"+(2+j)+"" } }
]);
        }
}
}
//布局
var layout = cy.layout({
  name: 'circle'
});
layout.run();
}
addNotesAndEdges()


//处理由Prime算法传过来的参数以便高亮显示：
var primeP=[]
for(var i=0;i<minTreePrime.length;i++){
        primeP.push(minTreePrime[i])
    }



//高亮展示Prime算法(未清除矩阵)过程：
var h=0;
function primeHighlightedOrginal() {
    cy.remove("nodes")
    addNotesAndEdges();
    primeHighlighted();
}
function primeHighlighted (){
    cy.center("#A13")
    if(h<primeP.length){
        cy.$("#A"+primeP[h][0]+"").addClass("highlighted");
         cy.$("#A"+primeP[h][0]+"A"+primeP[h][1]+"").addClass("highlighted");
         cy.$("#A"+primeP[h][1]+"A"+primeP[h][0]+"").addClass("highlighted");
         //左侧显示标注信息：
        var weight=cy.getElementById("A"+primeP[h][1]+"A"+primeP[h][0]+"").data('weight')
        if(!weight){
            weight=cy.getElementById("A"+primeP[h][0]+"A"+primeP[h][1]+"").data('weight')

        }
        $("#Ptext").append("<p id='pp' class='text-info'>连接点"+primeP[h][0]+"和点"+primeP[h][1]+"  边的权值为:"+weight+"</p>");
        cy.$("#A"+primeP[h][1]+"").addClass("highlighted");
              h++;
        setTimeout(primeHighlighted, 2000);
        }
    if(h==primeP.length){
        getTotalWeight();
        h++;
    }
     cy.$("#A"+primeP[0][0]+"").addClass("highlighted");
    }
//计算权重之和：
function getTotalWeight() {
    var totalWeight=0;
    for(var n=0;n<primeP.length;n++){
     cy.$("#A"+primeP[n][0]+"A"+primeP[n][1]+"").addClass("highlighted");
         cy.$("#A"+primeP[n][1]+"A"+primeP[n][0]+"").addClass("highlighted");
         //左侧显示标注信息：
        var weight=cy.getElementById("A"+primeP[n][0]+"A"+primeP[n][1]+"").data('weight');
        if(!weight){
             weight=cy.getElementById("A"+primeP[n][1]+"A"+primeP[n][0]+"").data('weight');
        }
        console.log(weight)
        totalWeight+=weight;
}
         $("#Ptext").append("<p class='text-info'>总权值为:"+totalWeight+"</p>");
}


//只剩下最小生成树高亮展示最小生成树的过程(prime)：
function primeMinTreeOnly(){
    cy.remove("nodes");
    //确定点集集合
    primePNodes=[]
    for(var m=0;m<primeP.length;m++){
        if(!primePNodes.includes(primeP[m])){
            primePNodes.push(primeP[m])
        }
    }
    //添加点集：
    for(var i=0;i<primePNodes.length;i++){
    cy.add([
  { group: "nodes", data: { id: "A"+(i+1)+"" } },
  { group: "nodes", data: { id: "A"+(i+2)+"" } }

]);
}
    // 高亮显示：
var h=0;
var primeHighlightedOnly=function (){
    cy.center("#A13")
    if(h<primeP.length){
        cy.$("#A"+primeP[h][0]+"").addClass("highlighted");
                 cy.add([
  { group: "edges", data: { id: "A"+primeP[h][0]+"A"+primeP[h][1]+"",weight:content[primeP[h][0]-1][primeP[h][1]-1],source:"A"+primeP[h][0]+"",target:"A"+primeP[h][1]+"" }}
  ]);
         cy.$("#A"+primeP[h][0]+"A"+primeP[h][1]+"").addClass("highlighted");
         cy.$("#A"+primeP[h][1]+"A"+primeP[h][0]+"").addClass("highlighted");
         //左侧显示标注信息：
        var weight=cy.getElementById("A"+primeP[h][1]+"A"+primeP[h][0]+"").data('weight')
        if(!weight){
            weight=cy.getElementById("A"+primeP[h][0]+"A"+primeP[h][1]+"").data('weight')

        }
        $("#Ptext").append("<p class='text-info'>连接点"+primeP[h][0]+"和点"+primeP[h][1]+"  边的权值为:"+weight+"</p>");
        cy.$("#A"+primeP[h][1]+"").addClass("highlighted");
        h=h+1;
        setTimeout(primeHighlightedOnly, 1000);
    }
  if(h==primeP.length){
      getTotalWeight();
      h++;
  }
    }
    cy.$("#A"+primeP[0][0]+"").addClass("highlighted");
    primeHighlightedOnly()
//重新布局：
    var layout = cy.layout({
  name: 'circle'
});
layout.run();
}
//绑定一个点击之后就清除所有的边的函数：
function removeEdges() {
    cy.remove("edges");
}


//使用Ajax获取kruskal算法所得到的最小生成树
var minTreeKruskal
 function  getMinTreeDataByKruskal() {
  let xhr = new XMLHttpRequest();
        xhr.open("GET","/getMinTreeByKruskal",false);
		xhr.onload = function() {
			if (xhr.status == 200) {
                  minTreeKruskal=JSON.parse(xhr.responseText);
			} else {
              alert("请求失败！")
			}
		};
		xhr.send();
}


//处理由Kruskal算法传过来的参数以便高亮显示：
var kruskalP=[]
for(var i=0;i<minTreeKruskal.length;i++){
        kruskalP.push(minTreeKruskal[i])
    }


//高亮展示Kruskal算法(未清除矩阵)过程：
var h=0;
function kruskalHighlightedOrginal() {
    cy.remove("nodes")
    addNotesAndEdges();
    kruskalHighlighted();
}
function kruskalHighlighted (){
        cy.center("#A13")
    if(h<kruskalP.length){
        cy.$("#A"+kruskalP[h][0]+"").addClass("highlighted");
         cy.$("#A"+kruskalP[h][0]+"A"+kruskalP[h][1]+"").addClass("highlighted");
         cy.$("#A"+kruskalP[h][1]+"A"+kruskalP[h][0]+"").addClass("highlighted");
          //左侧显示标注信息：
        var weight=cy.getElementById("A"+kruskalP[h][1]+"A"+kruskalP[h][0]+"").data('weight')
        if(!weight){
            weight=cy.getElementById("A"+kruskalP[h][0]+"A"+kruskalP[h][1]+"").data('weight')

        }
        $("#Ptext").append("<p class='text-info'>连接边"+kruskalP[h][0]+"---"+kruskalP[h][1]+"   权值为:"+weight+"</p>");

        cy.$("#A"+kruskalP[h][1]+"").addClass("highlighted");
              h++;
        setTimeout(kruskalHighlighted, 2000);
        }
    if(h==kruskalP.length){
        getTotalWeightByKruskal();
        h++;
    }
     cy.$("#A"+kruskalP[0][0]+"").addClass("highlighted");
    }
//求权值之和：
function getTotalWeightByKruskal(){
    var totalWeightByKruskal=0;
    for(var b=0;b<kruskalP.length;b++){
          var weight=cy.getElementById("A"+kruskalP[b][1]+"A"+kruskalP[b][0]+"").data('weight');
        if(!weight){
            weight=cy.getElementById("A"+kruskalP[b][0]+"A"+kruskalP[b][1]+"").data('weight')

        }
        totalWeightByKruskal+=weight;
    }
      $("#Ptext").append("<p class='text-info'>总权值为:"+totalWeightByKruskal+"</p>");
}

//只剩下最小生成树高亮展示最小生成树的过程(kruskal)：
function KruskalMinTreeOnly(){
    cy.remove("nodes");
    //确定点集集合
    primePNodes=[]
    for(var m=0;m<kruskalP.length;m++){
        if(!primePNodes.includes(kruskalP[m])){
            primePNodes.push(kruskalP[m])
        }
    }
    //添加点集：
    for(var i=0;i<primePNodes.length;i++){
    cy.add([
  { group: "nodes", data: { id: "A"+(i+1)+"" } },
  { group: "nodes", data: { id: "A"+(i+2)+"" } }

]);
}
    // 高亮显示：
var h=0;
var kruskalHighlightedOnly=function (){
    cy.center("#A13")
    if(h<kruskalP.length){
        cy.$("#A"+kruskalP[h][0]+"").addClass("highlighted");
                 cy.add([
  { group: "edges", data: { id: "A"+kruskalP[h][0]+"A"+kruskalP[h][1]+"",weight:content[kruskalP[h][0]-1][kruskalP[h][1]-1],source:"A"+kruskalP[h][0]+"",target:"A"+kruskalP[h][1]+"" }}
  ]);
         cy.$("#A"+kruskalP[h][0]+"A"+kruskalP[h][1]+"").addClass("highlighted");
         cy.$("#A"+kruskalP[h][1]+"A"+kruskalP[h][0]+"").addClass("highlighted");
          //左侧显示标注信息：
        var weight=cy.getElementById("A"+kruskalP[h][1]+"A"+kruskalP[h][0]+"").data('weight')
        if(!weight){
            weight=cy.getElementById("A"+kruskalP[h][0]+"A"+kruskalP[h][1]+"").data('weight')

        }
        $("#Ptext").append("<p class='text-info'>连接边"+kruskalP[h][0]+"---"+kruskalP[h][1]+"   权值为:"+weight+"</p>");
        cy.$("#A"+kruskalP[h][1]+"").addClass("highlighted");
        h=h+1;
        setTimeout(kruskalHighlightedOnly, 1000);
    }
    if(h==kruskalP.length){
        getTotalWeightByKruskal();
        h++;
    }
    }
    cy.$("#A"+kruskalP[0][0]+"").addClass("highlighted");
    kruskalHighlightedOnly()
//重新布局：
    var layout = cy.layout({
  name: 'circle'
});
layout.run();
}